<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>会员登记</title>
    <link type="text/css" rel="stylesheet" href="../common/bootstrap/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="../common/bootstrap/table/css/bootstrap-table.min.css">
    <link type="text/css" rel="stylesheet" href="../common/validate/bootstrapValidator.css">
    <link type="text/css" rel="stylesheet" href="../common/toastr/toastr.min.css">
    <link type="text/css" rel="stylesheet" href="../common/toastr/toastr.min.css">

    <link rel="stylesheet" href="../common/css/common.css"/>


    <style type="text/css">

        #topSlotCard {
            margin-top: 100px;
            margin-left: 200px;
            width: 70%;
        }
        .title1{
            text-align: center;
        }
    </style>

</head>
<body>


<div id="topSlotCard">
    <h2 class="title1">会员登记</h2>
    <!--    <table id="tab">-->
    <div class="panel panel-primary">
        <div class="panel-body">
            <form id="addUserform">
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group input-group">
                            <span class="input-group-addon">会员姓名</span>
                            <input class="form-control" placeholder="会员姓名" name="userName" id="userName">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group input-group">
                            <span class="input-group-addon">员工手机号</span>
                            <input class="form-control" placeholder="员工手机号" id="phone" name="phone">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group input-group">
                            <span class="input-group-addon">会员等级</span>
                            <select class="form-control" id="levelName" name="levelId">

                            </select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group input-group">
                            <span class="input-group-addon">状态</span>
                            <select class="form-control" id="status" name="status">
                                <option value="1">启用</option>
                                <option value="0">禁用</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group input-group">
                            <span class="input-group-addon">办卡人员</span>
                            <input class="form-control" readonly="readonly" name="staffName" id="staffName">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group input-group">
                            <span class="input-group-addon">初始积分</span>
                            <input class="form-control" placeholder="0" readonly="readonly" value="0" name="credit" id="credit">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group input-group">
                            <span class="input-group-addon">会员卡号</span>
                            <input class="form-control" readonly="readonly" name="cardId" id="cardId">
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group input-group">
                            <span class="input-group-addon">起充余额</span>
                            <input class="form-control" placeholder="0" readonly="readonly" value="0" name="amount" id="amount">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group input-group">
                            <span class="input-group-addon">身份证号</span>
                            <input class="form-control" placeholder="身份证号" name="idCard" id="idCard">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group input-group">
                            <span class="input-group-addon">会员性别</span>
                            <select class="form-control" id="sex" name="sex">
                                <option value="1">男</option>
                                <option value="2">女</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-4">
                        <div class="input-group">
                            <select class="form-control" id="province" name="province"
                                    style="-webkit-appearance: none;-webkit-tap-highlight-color: #fff; outline: 0;">
                                </span>
                                <option value="0">--请选择所在省份--</option>
                            </select>
                            <span class="input-group-addon">省</span>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group input-group">
                            <select class="form-control" id="area" name="area"
                                    style="-webkit-appearance: none;-webkit-tap-highlight-color: #fff; outline: 0;">
                                <option value="0">--请选择所在城市--</option>
                            </select>
                            <span class="input-group-addon">市</span>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group input-group">
                            <select class="form-control" id="district" name="district"
                                    style="-webkit-appearance: none;-webkit-tap-highlight-color: #fff; outline: 0;">
                                <option value="0">--请选择所在区--</option>
                            </select>
                            <span class="input-group-addon">区</span>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group input-group">
                            <span class="input-group-addon">详细地址</span>
                            <input class="form-control" placeholder="详细地址" name="address" id="address">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group input-group">
                            <span class="input-group-addon">备注</span>
                            <input class="form-control" placeholder="备注" name="momo" id="momo">
                        </div>
                    </div>
                </div>

                <div style="text-align:center">
                    <button type="button" class="btn btn-danger" onclick="userManage.adduser()">提交</button>
                    <button type="button" class="btn btn-info" onclick="location.reload();">重置</button>

                </div>
            </form>
        </div>
    </div>
</div>

</body>

<script type="text/javascript" src="../common/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../common/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="../common/bootstrap/table/js/bootstrap-table.min.js"></script>
<script type="text/javascript" src="../common/bootstrap/table/js/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript" src="../common/toastr/toastr.min.js"></script>
<script type="text/javascript" src="../common/validate/bootstrapValidator.min.js"></script>
<script src="../user/userAdd.js"></script>

<script>
    $(function () {
        $("#staffName").val(window.localStorage.getItem("loginName"));
        initCardType();
    });

    var num1;
    var num2
    var province = ['广东', '四川', '浙江'];
    var area = [['广州', '深圳', '惠州'], ['成都', '绵阳', '攀枝花'], ['杭州', '宁波', '温州']];
    var district = [[['白云区', '天河区','花都区'], ['南山区', '宝安区', '罗湖区'], ['龙门区', '惠城区', '惠阳区']],
        [['金牛区', '新都区'], ['安州区', '游仙区'], ['东区', '仁和区']],
        [['滨江区', '拱墅区'], ['镇海区', '北仑区'], ['龙湾区', '镇海区']]];


    for (var i in province) {
        $("#province").append('<option>' + province[i] + '</option>');
        $("#province").change(function () {
            $("#area").children().not(':eq(0)').remove();//选择其他省的时候，把之前内容清空掉
            $("#district").children().not(':eq(0)').remove();//这个步骤是为了，当你选择其他省市区选好后，你选别的其他省区是不会清空，
            num1 = $(this).children('option:selected').index();//取到selected的值
            var areas = area[num1 - 1];
            for (var i in areas) {
                $("#area").append('<option>' + areas[i] + '</option>');
            }
        });
        $("#area").change(function () {
            $("#district").children().not(':eq(0)').remove();
            num2 = $(this).children('option:selected').index();//:selected---查找所有选中的选项元素--$("select  option:elected")
            var districts = district[num1 - 1][num2 - 1];
            for (var i in districts) {
                $("#district").append('<option>' + districts[i] + '</option>');
            }
        })

    }

    //第一个下拉框的值改变时,第二个下拉框跟着变化,级联
    province.onchange = function () {
        area.innerHTML = "";
        var arr = str[this.value];//通过value取值
        for (var i in arr) {//for :earh
            var option = document.createElement("option");
            option.text = arr[i];
            option.value = arr[i];

            area.appendChild(option);
        }
    }

    function initCardType() {
        $.ajax({
            url:"/GetCardTypeAllServlet",
            type:'post',
            dataType:'json',
            success:function (result) {
                var res = result.data;
                for (var i = 0; i < res.length; i++) {
                    var opt = $("<option value='" + res[i].id + "'>" + res[i].name + "</option>");
                    $("#levelName").append(opt);
                }
            }
        })
    }
</script>
</html>